<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大事件-后台首页</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 导入bootstrap的js文件 -->
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/http.js"></script>
</head>

<body>
    <div class="sider">
        <a href="#" class="logo"><img src="images/logo02.png" alt="logo"></a>
        <div class="user_info">
            <img src="images/2.jpg" alt="person">
            <span>欢迎&nbsp;&nbsp;<i style="font-style: normal;">李思思</i></span>
            <b>管理员</b>
        </div>
        <!-- 左侧导航栏 -->
        <div class="menu">
            
            <!-- //首页 -->
            <div class="level01 active">
                <a href="#" target="./main_count.html">
                    <i class="iconfont icon-yidiandiantubiao04"></i><span>首页</span>
                </a>
            </div>

            <!-- 文章管理 -->
            <div class="level01">
                <a href="./article_list.html" target="main_frame">
                    <i class="iconfont icon-icon-article">

                    </i><span>文章管理</span><b class="iconfont icon-arrowdownl"></b></a>
            </div>
            <ul class="level02">
                <!-- 文章列表 -->
                <li><a href="./article_list.html" target="main_frame"><i class="iconfont icon-previewright"></i><span>文章列表</span></a></li>

                <!-- 发表文章 -->
                <li><a href="./article_release.html" target="main_frame"><i class="iconfont icon-previewright"></i><span>发表文章</span></a></li>

                <!-- 文章类别 -->
                <li><a href="./article_category.html" target="main_frame"><i class="iconfont icon-previewright"></i><span>文章类别管理</span></a>
                </li>
            </ul>
       
            <!-- 评论页面 -->
            <div class="level01">
                <a href="./comment_list.html" target="main_frame">
                    <i class="iconfont icon-comment"></i><span>评论管理</span>
                </a>
            </div>
             
            <!-- 个人中心 -->
            <div class="level01" id="user">
                <a href="./user.html" target="main_frame">
                    <i class="iconfont icon-user"></i><span>个人中心</span>
                </a>
            </div>
        </div>
        <!-- 顶部栏 -->
        <div class="header_bar">
            <div class="user_center_link">
                <a href="./user.html" target="main_frame">个人中心</a>
                <img src="images/2.jpg" alt="person">
                <a href="javascript:void(0)" class="logout"><i class="iconfont icon-tuichu"></i> 退出</a>
            </div>
        </div>
        <!-- 右侧主体内容 -->
        <div class="main" id="main_body">
          <iframe  name='main_frame' src="./main_count.html" frameborder="0" style="width: 100%; height: 100%;"></iframe>
        </div>
    </div>
        <script>
            // 获取头像和用户名
            $(function(){
                // 发送ajax请求
                $.ajax({
                    type:'get',
                    url:BigNew.user_info,  
                    
                    //发送请求头
                    //  headers:{
                        //     Authorization:localStorage.getItem('token'),
                        //  } ,
                        success:function(backData){
                            console.log(backData); 
                            //  改变用户头像和用户名
                            if(backData.code == 200){
                                $('.user_info>img').attr('src',backData.data.userPic); 
                                $('.user_info>span>i').text(backData.data.nickname); 
                                $('.user_center_link>img').attr('src',backData.data.userPic); 
                            }
                        }
                    })
                    
                    //点击退出的时候删除 token 
                    //返回登录页面
                    $('.logout').on('click',function(e){
                        //阻止a链接的默认调转
                        e.preventDefault();
                        //判断用户是否退出
                        if(confirm('你确定要退出吗 ?')){
                            localStorage.removeItem('token');
                            location.href = './login.html';
                        }
                    })
                $.ajaxSetup(
                    {
                        beforeSend:function(xhr){
                        xhr.setRequestHeader('Authorization',localStorage.getItem('token'));
                    },
                    error:function(xhr,status,error){
                      if(error == 'Forbidden'){
                        console.log(error);
                                //说明没有登录
                                alert('请登录');
                                window.location.href = './login.html';
                      }
                    }                                          
                }
                );

                //左侧栏 点击的时候变颜色
                $('.level01').on('click',function(){
                    // 点击那个就那个添加类
                    $(this).addClass('active').siblings('div').removeClass('active');
                    // 如果为文章管理就ul显示
                    if($(this).index() == 1){
                      $('.level02').slideToggle();
                    // 给b标签添加rotate0类
                    $(this).find("b").toggleClass('rotate0');

                    // 触发二级菜单文章列表的单击事件
                    // $('ul.level02>li:eq(0)>a').trigger('click')
                    //二级菜单文章列表 里面的a标签设置点击事件
                    //1.给a标签设置点击事件,犹豫事件冒泡会触发li标签的单击事件
                    //2.给a标签(dom元素)单击,那就回跳转
                    $('ul.level02>li:eq(0)>a')[0].click()    
                    }

                })
                //给左侧栏中的ul添加点击事件
                $('ul.level02>li').on('click',function(){
                    // console.log(this);
                    // 没有就添加这个类其兄弟删除
                    $(this).addClass('active').siblings('li').removeClass('active');
                })
                })
                </script>
</body>
</html> 